import React, { Component } from 'react'
import { Card, Table } from 'antd'
import Axios from '../../axios'
export default class High extends Component {
  componentDidMount() {
    Axios.ajax({
      url: '/user'
    }).then(res => {
      let userList = res.userList.map((item, index) => {
        item.key = index
        return item
      })
      this.setState({
        userList,
        selectedRowKeys: []
      })
    })
  }
  state = {
    userList: [],
    sortedInfo: null
  }
  handleChange = (pagination, filters, sorter) => {
    this.setState({
      sortedInfo: sorter,
    });
  }
  render() {
    let { sortedInfo } = this.state
    sortedInfo = sortedInfo || {}
    console.log(sortedInfo)
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 200
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 200
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '是否已婚',
        dataIndex: 'isMarried',
        key: 'isMarried',
        render(data) {
          return data === 1 ? '未婚' : '已婚'
        },
        width: 200
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        width: 200
      }
    ]
    const columns2 = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        fixed: 'left',
        width: 200
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 200
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex15',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex2',
        key: 'sex14',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex13',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex12',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex11',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex10',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex9',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex8',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex7',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex6',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex5',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex4',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex3',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex2',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex1',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '是否已婚',
        dataIndex: 'isMarried',
        key: 'isMarried',
        render(data) {
          return data === 1 ? '未婚' : '已婚'
        },
        width: 200
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        fixed: 'right',
        width: 200
      }
    ]

    const columns3 = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        sorter: (a, b) => a.id - b.id,
        sortOrder: sortedInfo.columnKey === 'id' && sortedInfo.order,
        width: 200
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 200
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        width: 200
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        render(data) {
          return data === 1 ? '男' : '女'
        },
        width: 200
      },
      {
        title: '是否已婚',
        dataIndex: 'isMarried',
        key: 'isMarried',
        render(data) {
          return data === 1 ? '未婚' : '已婚'
        },
        width: 200
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        width: 200
      }
    ]
    return (
      <div>
        <Card title="头部固定">
          <Table
            columns={columns}
            dataSource={this.state.userList}
            scroll={{ y: 240 }}
          />
        </Card>
        <Card title="左侧固定">
          <Table
            columns={columns2}
            dataSource={this.state.userList}
            scroll={{ x: '120%' }}
          />
        </Card>
        <Card title="排序">
          <Table
            columns={columns3}
            dataSource={this.state.userList}
            onChange={this.handleChange}
          />
        </Card>
      </div>
    )
  }
}
